<template>
    <div class="shopping-cart">
        <header>
            <div class="t">购物车({{ dataArr.length }})</div>
            <div class="sc" @click="sc">删除</div>
        </header>
        <main>
            <div class="wrap">
                <div class="content" v-for="(i, index) in dataArr" :key="i.id + i.select">
                    <div class="checkbox">
                        <van-checkbox v-model="i.checked" checked-color="#1ba784" @click="isSelect(i.checked, i.price, i.num, index)"></van-checkbox>
                    </div>
                    <router-link tag="div" :to="`/productdetails/${i.id}`" class="r">
                        <div class="img" :style="{ backgroundImage: `url(${i.src})` }"></div>
                        <div class="text">
                            <div class="title van-ellipsis">{{ i.name }}</div>
                            <div class="select van-ellipsis">
                                <p>{{ i.select }}</p>
                            </div>
                            <div class="b">
                                <div class="price van-ellipsis">{{ (i.price * i.num).toFixed(2) }}</div>
                                <div class="add">
                                    <van-stepper v-model="i.num" @change="isNum(i.num, index)" :disabled="i.checked" />
                                </div>
                            </div>
                        </div>
                    </router-link>
                </div>
            </div>
        </main>
        <router-view :dataArr="dataArr" @setDataArr="setDataArr" :account="account"></router-view>
        <footer>
            <van-submit-bar class="submit-bar" :price="selectPrice" button-text="提交订单" @submit="onSubmit">
                <van-checkbox v-model="checked" checked-color="#1ba784" @click="isAllSelect">全选</van-checkbox>
            </van-submit-bar>
        </footer>
    </div>
</template>

<script>
export default {
    props: ["user", "account"],
    data() {
        return {
            checked: false,
            dataArr: [],
            selectPrice: 0,
            selectNum: 0,
        };
    },
    methods: {
        shoppingcartApi() {
            return this.axios("http://127.0.0.1/shoppingcarts", {
                params: {
                    account: this.account,
                },
            }).then(({ data }) => {
                this.dataArr = data;
                console.log(data);
            });
        },
        isSelect(i, price, num, index) {
            if (i) {
                this.selectNum++;
                this.dataArr[index].checked = i;
                this.selectPrice += (price * num).toFixed(2) * 100;
            } else {
                this.selectNum--;
                this.dataArr[index].checked = i;
                this.selectPrice -= (price * num).toFixed(2) * 100;
            }
            if (this.selectNum == this.dataArr.length) {
                this.checked = true;
            } else {
                this.checked = false;
            }
        },
        isAllSelect() {
            if (this.checked) {
                this.dataArr.forEach((i) => {
                    i.checked = true;
                    this.selectPrice += (i.price * i.num).toFixed(2) * 100;
                });
                this.selectNum = this.dataArr.length;
            } else {
                this.dataArr.forEach((i) => {
                    i.checked = false;
                });
                this.selectNum = 0;
                this.selectPrice = 0;
            }
        },
        isNum(num, index) {
            this.dataArr[index].num = num;
        },
        onSubmit() {
            if (this.selectPrice == "0.00") {
                this.$toast.fail("亲，您还没有选择商品哦");
                return;
            }
            this.$router.push({ name: "pay", params: { price: this.selectPrice, type: 1 } });
        },
        setDataArr({ data, selectPrice }) {
            this.dataArr = data;
            this.selectPrice = selectPrice;
        },
        async sc() {
            this.dataArr = this.dataArr.filter((i) => {
                return !i.checked;
            });
            await this.axios
                .post("http://127.0.0.1/setshoppingcart", {
                    data: {
                        account: this.account,
                        arr: this.dataArr,
                    },
                })
                .then(() => {});
            this.selectPrice = 0;
            this.selectNum = 0;
            this.checked = false;
        },
    },
    beforeRouteEnter(to, from, next) {
        next((vm) => {
            vm.$nextTick(async () => {
                if (vm.user) {
                    next();
                } else {
                    vm.$toast.fail("请先登录");
                    next("/login");
                    return;
                }
                if (!vm.user) {
                    return;
                }
                console.log(vm.account);
                await vm.shoppingcartApi();
                vm.dataArr.forEach((i) => {
                    if (i.checked) {
                        vm.selectPrice += (i.price * i.num).toFixed(2) * 100;
                        vm.selectNum++;
                    }
                });
                if (vm.selectNum == vm.dataArr.length && vm.dataArr.length != 0) {
                    vm.checked = true;
                }
            });
        });
    },
    beforeRouteLeave(to, from, next) {
        if (this.account) {
            console.log(this.account);
            this.axios
                .post("http://127.0.0.1/setshoppingcart", {
                    data: {
                        account: this.account,
                        arr: this.dataArr,
                    },
                })
                .then(({ data }) => {
                    console.log(data);
                });
        }
        next();
    },
};
</script>

<style lang="scss" scoped>
.shopping-cart {
    background-color: #fafafa;
    min-height: 100vh;
}
header {
    .t {
        height: 3.125rem;
        text-align: center;
        font-size: 20px;
        font-weight: 600;
        line-height: 3.125rem;
        color: #1ba784;
        background-color: #fff;
    }
    .sc {
        position: absolute;
        right: 1.625rem;
        top: 1rem;
    }
}
main {
    padding: 1vh 5vw;
    box-sizing: border-box;
    width: 100vw;
    margin-bottom: 50px;
}
.content {
    background-color: #fff;
    width: 100%;
    height: 15vh;
    display: flex;
    padding: 1vh 2vw;
    box-sizing: border-box;
    border-radius: 20px;
    margin-bottom: 1vh;
    .checkbox {
        width: 1.25rem;
        display: flex;
        align-items: center;
        flex-grow: 0;
    }
    .r {
        width: 33.375rem;
        display: flex;
        padding: 1vh 2vw;
        box-sizing: border-box;
        flex-grow: 0;
        justify-content: space-between;
        .img {
            border-radius: 10px;
            overflow: hidden;
            flex-grow: 0;
            width: 5.9375rem;
            height: 100%;
            background-position: center;
            background-size: cover;
            margin-right: 0.1875rem;
        }
        .text {
            flex-grow: 0;
            width: 13.75rem;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            .title {
                flex-grow: 0;
                width: 100%;
                font-size: 22px;
                font-weight: 600;
            }
            .select {
                flex-grow: 0;
                width: 100%;
                p {
                    padding: 0.1875rem;
                    display: inline-block;
                    color: #ccc;
                    background-color: #f7f7f7;
                    font-size: 16px;
                }
            }
            .b {
                flex-grow: 0;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .price {
                    flex-grow: 0;

                    width: 50%;
                    font-size: 18px;
                    font-weight: 600;
                    color: red;
                }
            }
        }
    }
}
.submit-bar {
    bottom: 50px;
}
</style>
